<template>
	<div class="video-preview-container" v-if="isShow">
		<el-dialog :title="title" :visible.sync="isShow" width="375px" :before-close="close" class="preview-dialog" :close-on-click-modal="false" append-to-body>
			<video :src="url" controls="controls" width="375" height="667" autoplay></video>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		url: {
			type: String,
			required: true,
			default: () => ''
		},
		isShow: {
			type: Boolean,
			default: () => false,
			required: true
		},
		title: {
			type: String,
			default: () => '视频预览'
		}
	},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="less">
.preview-dialog {
	.el-dialog__body {
		padding: 0 0px;
		height: 667px;
		text-align: center;
	}
	.el-dialog__title {
		font-weight: 700;
	}
	video {
		background-color: #000;
	}
}
</style>
